<template>
	<view>
		<view class="top">
			<view class="top1" @click="$gopage('/pages/center/baoxiu/add_public',1)">

				<view class="top1text">
					公共报修
				</view>
				<image src="../../../static/ggbx.png" mode=""></image>
			</view>
			<view class="top1" style="background-image: url('../../../static/ggebxbj.png');"
				@click="$gopage('/pages/center/baoxiu/add_room',1)">
				<view class="top1text">
					个人报修
				</view>
				<image src="../../../static/grbx.png" mode=""></image>
			</view>
		</view>

		<quesheng title="物业" v-if="!list"></quesheng>

		<view v-for="(item,index) in list" :key="index">
			<view class="time">
				{{item.day}}
			</view>
			<view class="box" v-if="v.type==2" v-for="(v,k) in item.list" :key="k"
				@click="$gopage('/pages/center/baoxiu/info?id='+v.id,1)">
				<view class="box1">
					<view class="box1-1">
						<image src="/static/ggtx.png" mode=""></image>
						<view class="">
							{{v.community}}{{v.room}}
						</view>
					</view>
					<view class="box1-2">
						{{v.formatstatus}}
					</view>
				</view>
				<view class="box2">
					<view class="box2-1">
						公共报修
					</view>
					<view class="box2-1">
						{{v.protitle}}
					</view>
				</view>
				<view class="box3">
					{{v.content}}
				</view>
				<view class="box4" v-if="v.pics.length>0">
					<view v-for="pic in v.pics"
						style="width: 210rpx; height: 135rpx; overflow: hidden; border-radius: 20rpx;">
						<image :src="pic" mode="aspectFill" style="width: 100%;" @click="previewImage(k,v.pics)">
						</image>
					</view>
				</view>
				<view class="box5">
					<view class="box5-1">
						{{v.ctime}}
					</view>
					<view class="box5-2">
						报修详情
					</view>
				</view>
			</view>

			<view class="box" v-if="v.type==1" v-for="(v,k) in item.list" :key="k"
				@click="$gopage('/pages/center/baoxiu/info?id='+v.id,1)">
				<view class="box1">
					<view class="box1-1">
						<image src="/static/grtx.png" mode=""></image>
						<view class="">
							{{v.community}}{{v.room}}
						</view>
					</view>
					<view class="box1-3">
						{{v.formatstatus}}
					</view>
				</view>
				<view class="box2">
					<view class="box2-2">
						个人报修
					</view>
					<view class="box2-2">
						{{v.protitle}}
					</view>
				</view>
				<view class="box3">
					{{v.content}}
				</view>
				<view class="box4" v-if="v.pics.length>0">
					<view v-for="pic in v.pics" @click="previewImage(k,v.pics)"
						style="width: 210rpx; height: 135rpx; overflow: hidden; border-radius: 20rpx;">
						<image :src="pic" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view>
				<view class="box5">
					<view class="box5-1">
						{{v.ctime}}
					</view>
					<view class="box5-2">
						报修详情
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import quesheng from '../../../components/quesheng.vue'

	var that;
	export default {
		components: {
			quesheng
		},
		data() {
			return {
				list: [],
				nextp: 1,

			}
		},
		onLoad() {
			that = this;
		},
		onShow() {
			this.nextp = 1;
			this.getlist();
		},
		methods: {
			previewImage(index, pics) {
				wx.previewImage({
					current: pics[index],
					urls: pics //一个数组，可以查看多张图
				});
			},
			getlist() {
				var p = that.nextp ? that.nextp : '';
				if (p) {
					uni.showLoading({
						title: '加载中...'
					})
					that.$post('api/baoxiulist', {
						p: p
					}).then(res => {
						uni.hideLoading()
						if (p == 1) {
							that.list = res.data.list;
						} else {
							var list = res.data.list;
							if (list) {
								for (var i = 0; i < list.length; i++) {
									that.list.push(list[i]);
								}
							}
						}
						that.nextp = res.data.nextp;
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		width: 92vw;
		margin: 20rpx auto;
		justify-content: space-between;
	}

	.top1 {
		width: 336rpx;
		height: 238rpx;
		background-image: url('../../../static/ggbxbj.png');
		background-size: 336rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.top1text {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
		}

		>image {
			width: 78rpx;
			height: 78rpx;
		}

	}

	.time {
		margin: 20rpx auto;
		width: 92vw;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.box {
		width: 92vw;
		margin: 0 auto;
		margin-bottom: 20rpx;
		background-color: white;
		border-radius: 15rpx;
		box-shadow: 0px 0px 10px rgba(40, 183, 249, 0.2)
	}

	.box1 {
		width: 86vw;
		margin: 0rpx auto;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.box1-1 {
		display: flex;

		>image {
			margin-right: 20rpx;
			width: 38rpx;
			height: 38rpx;
		}
	}

	.box1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #d66f3f;
	}

	.box1-3 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #000000;
	}

	.box2 {
		width: 86vw;
		margin: 0rpx auto;
		padding: 20rpx 0;
		display: flex;

		.box2-1 {
			width: 121rpx;
			height: 46rpx;
			border: #538DFD solid 4rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			line-height: 38rpx;
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #538DFD;
			margin-right: 20rpx;
		}

		.box2-2 {
			width: 121rpx;
			height: 45rpx;
			border: #38BFCC solid 4rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			line-height: 45rpx;
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #38BFCC;
			margin-right: 20rpx;
		}
	}

	.box3 {
		background-color: rgb(238, 238, 238);
		width: 86vw;
		margin: 0rpx auto;
		padding: 4vw;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.box4 {
		width: 86vw;
		margin: 0rpx auto;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;

		>image {
			width: 100%
		}
	}

	.box5 {
		width: 86vw;
		margin: 0rpx auto;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;

		.box5-1 {
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
		}

		.box5-2 {
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #538DFD;
			line-height: 36rpx;
		}
	}
</style>
